<template>
  <div class="f-flow-design-image-wrapper">
    <svg :id="containerID" :style="svgStyle" ref="FlowModel" class="f-flow-design-image">
      <g/>
    </svg>

    <ContextModal ref="ContextModal" :width="200"
                  @contextItemClick="contextItemClick">
      <template v-slot:add>
        <add/>
      </template>

      <template v-slot:branch>
        <branch/>
      </template>

      <template v-slot:remove>
        <remove/>
      </template>

      <template v-slot:setting>
        <setting/>
      </template>
    </ContextModal>

    <UserTaskModal ref="UserTaskModal" @addUserTask="addUserTask"/>
    <LineFormulaModal ref="LineFormulaModal" @formulaEdited="lineFormulaModalOK"/>
    <UserTaskPropertiesModal @updateUserTask="updateUserTask" ref="UserTaskPropertiesModal" @ok="userTaskPropertiesModalOK"/>
  </div>
</template>

<script>
import {DefaultFormDefinition} from '@/components/form/DefaultFormDefinition';
import './style.css';
import FlowDesignHelper from '@/components/flow/FlowModelDesigner/FlowDesignHelper';
import {guid, isEmpty} from '@/utils/CommonUtils';
import {DefaultFlowModel} from '@/components/flow/DefaultFlowDefinition';
import './flowStyle.css';
import ContextModal from '@/components/flow/ContextModal';
import UserTaskModal from '@/components/flow/UserTaskModal.vue';
import LineFormulaModal from '@/components/flow/LineFormulaModal.vue';
import UserTaskPropertiesModal from '@/components/flow/UserTaskPropertiesModal.vue';

export default {
  name: 'FlowModelDesigner',
  components: {UserTaskPropertiesModal, LineFormulaModal, UserTaskModal, ContextModal},
  data() {
    return {
      containerID: `flow_${guid()}`,
      flowDefinition: DefaultFlowModel,
      formDefinition: DefaultFormDefinition,
      flowDesignHelper: undefined,
      startContext: [
        {title: '增加任务', id: 'createNode', icon: 'add'}
      ],
      emptyNodeContext: [
        {title: '删除', id: 'removeNode', icon: 'remove'}
      ],
      userTaskContext: [
        {title: '增加任务', id: 'createNode', icon: 'add'},
        {title: '插入任务', id: 'insertNode', icon: 'add'},
        {title: '增加分支', id: 'addParallelNode', icon: 'branch'},
        {title: '增加空分支', id: 'addEmptyNode', icon: 'branch'},
        {title: '属性', id: 'propertyConfig', icon: 'setting'},
        {title: '删除', id: 'removeNode', icon: 'remove'},
      ],
      gateWayEndContext: [
        {title: '增加任务', id: 'createNode', icon: 'add'}
      ],
      gateWayStartContext: [
        {title: '插入任务', id: 'insertNode', icon: 'add'},
      ],
      endContext: [
        {title: '插入任务', id: 'createNode', icon: 'add'}
      ],
    };
  },
  methods: {
    setFormDefinition(formDefinition) {
      this.formDefinition = formDefinition;
    },
    setData(flowModel) {
      this.flowModel = flowModel;
      this.flowDesignHelper = new FlowDesignHelper({
        flowModel: this.flowModel,
        formDefinition: this.formDefinition,
        containerID: this.containerID
      });
      this.flowDesignHelper.render().then(() => {
        this.bind();
      });
    },
    getFlowModel() {
      return this.flowModel;
    },
    bind() {
      $(`#${this.containerID} .start-label`).click((e) => this.nodeClick(e, 'start', this.startContext));
      $(`#${this.containerID} .end-label`).click((e) => this.nodeClick(e, 'end', this.endContext));
      $(`#${this.containerID} .user-label`).click((e) => this.nodeClick(e, e.target.getAttribute('data-user-task'), this.userTaskContext));
      $(`#${this.containerID} .empty-label`).click(this.emptyNodeClick);
      $(`#${this.containerID} .gateway-label-end`).click((e) => this.nodeClick(e, e.target.getAttribute('data-gateway'), this.gateWayEndContext));
      $(`#${this.containerID} .gateway-label-start`).click((e) => this.nodeClick(e, e.target.getAttribute('data-gateway'), this.gateWayStartContext));
      $(`#${this.containerID} .line-formula-config-icon`).click(this.lineFormulaConfiguationClick);
    },
    FlowModelDesigner() {
      return this.flowDesignHelper.getFlowModel();
    },
    emptyNodeClick(e) {
      this.clickingNode = e.target.getAttribute('data-empty-task');
      this.openContextModal(this.emptyNodeContext, e.clientX, e.clientY);
    },
    nodeClick(e, clickingNode, context) {
      this.clickingTarget = e.target
      this.clickingNode = e.target.getAttribute('data-empty-task');
      if (isEmpty(this.clickingNode)) {
        this.clickingNode = e.target.getAttribute('data-user-task');
      }
      this.openContextModal(context, e.clientX, e.clientY);
      this.clickingNode = clickingNode;
    },
    lineFormulaConfiguationClick(e) {
      this.clickingLine = null;
      let line = this.flowDesignHelper.getLineByElement(e.target);
      this.$refs.LineFormulaModal.setData(this.formDefinition, line);
    },
    openContextModal(context, x, y) {
      this.$refs.ContextModal.setData(context, x, y);
    },
    lineFormulaModalOK(line) {
      this.flowDesignHelper.renderFlowModel().then(this.bind)
    },
    userTaskPropertiesModalOK(userTask) {
      console.log('userTaskPropertiesModalOK')
      // this.flowDesignHelper.simpleAddNode(userTask).then(this.bind)
    },
    addUserTask(userTask) {
      if (this.clickingNode === 'start') {
        this.flowDesignHelper.insertUserTaskAfter(userTask, 'start').then(this.bind)
      } else if (this.clickingNode === 'end') {
        this.flowDesignHelper.insertUserTaskBefore(userTask, 'end').then(this.bind)
      } else {
        if (this.nodeAction === 'createNode') {
          this.flowDesignHelper.insertUserTaskAfter(userTask, this.clickingNode).then(this.bind)
        }
        if (this.nodeAction === 'insertNode') {
          this.flowDesignHelper.insertUserTaskBefore(userTask, this.clickingNode).then(this.bind)
        }
        if (this.nodeAction === 'addParallelNode') {
          this.flowDesignHelper.addParallelNode(userTask, this.clickingNode).then(this.bind)
        }
      }
    },
    updateUserTask(userTask) {
      this.flowDesignHelper.updateTask(userTask).then(this.bind)
    },
    contextItemClick(contextItem) {
      this.nodeAction = contextItem.id;
      if (contextItem.id === 'createNode') {
        this.$refs.UserTaskModal.setData(this.flowDesignHelper.createUserTaskNode());
        this.$refs.ContextModal.close();
      }
      if (contextItem.id === 'insertNode') {
        this.$refs.UserTaskModal.setData(this.flowDesignHelper.createUserTaskNode());
        this.$refs.ContextModal.close();
      }
      if (contextItem.id === 'addParallelNode') {
        this.$refs.UserTaskModal.setData(this.flowDesignHelper.createUserTaskNode());
        this.$refs.ContextModal.close();
      }
      if (contextItem.id === 'removeNode') {
        this.flowDesignHelper.removeSelectedNode(this.clickingNode).then(this.bind);
        this.$refs.ContextModal.close();
      }
      if (contextItem.id === 'propertyConfig') {
        let node = this.flowDesignHelper.getTaskById(this.clickingNode);
        this.$refs.UserTaskPropertiesModal.setData(node, this.formDefinition);
        this.$refs.ContextModal.close();
      }
      if (contextItem.id === 'addEmptyNode') {
        this.flowDesignHelper.addEmptyNode(this.clickingNode).then(this.bind);
        this.$refs.ContextModal.close();
      }
      if (contextItem.id === 'showHistory') {
        this.showHistory(this.clickingTarget);
        this.$refs.ContextModal.close();
      }
    },
    showHistory(element) {
    },
  },
  computed: {
    svgStyle() {
      return {};
    },
  }
};
</script>
